<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 16:33:15
 * @LastEditors: luojie
 * @LastEditTime: 2021-08-07 16:04:35
-->
<template>
  <view class="content">
    <image class="go-back-img" @click='goBack' src="https://szgd-dev.tgovcloud.com/public/images/login/back.png"/>
    <view class="form">
      <view class="title"> 登录 </view>
      <view class="form-wrap">
        <uni-forms
          :value="formData"
          :rules="rules"
          ref="form"
          class="myform"
          validate-trigger="submit"
          err-show-type="undertext"
        >
          <uni-forms-item name="phone">
            <image class="phone-icon" src="https://szgd-dev.tgovcloud.com/public/images/login/icon-phone.png"/>
            <uni-easyinput
              type="text"
              class='uni-input-style'
              v-model="formData.phone"
              placeholder="请输入手机号码"
            ></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="idCard">
            <image class="card-icon" src="https://szgd-dev.tgovcloud.com/public/images/login/icon-card.png"/>
            <uni-easyinput
              type="text"
              class='uni-input-style'
              v-model="formData.idCard"
              placeholder="请输入身份证后四位"
            ></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
      </view>

      <button class="submit-btn" @click="submitHandle">登录</button>
    </view>
  </view>
</template>

<script>
import { login, getGzryInfo, logout } from "@/api/login";
import { removeAllStorageSync } from '@/utils'
export default {
  data () {
    return {
      formData: {
        phone: "",
        idCard: "",
      },
      rules: {
        phone: {
          rules: [
            {
              required: true,
              errorMessage: "请输入手机号码",
            },
            {
              pattern: '^1[0-9]{10}$',
              errorMessage: "手机号码格式不正确"
            }
          ],
        },
        idCard: {
          rules: [
            {
              required: true,
              errorMessage: "请输入身份证后四位",
            },
            {
              pattern: '^[0-9]{3}[0-9xX]$',
              errorMessage: "身份证后四位格式不正确"
            }
          ],
        },
      },
    };
  },
  methods: {
    async submitHandle () {
      const formData = await this.$refs.form.validate(['phone', 'cardId'])
      await login(formData.phone, '', 'isGldWorker')
      let { idCard } = await getGzryInfo()
      if (idCard.substring(idCard.length - 4) === formData.idCard) {
        this.$store.commit('SET_AUTH_STATUS', true)
      } else {
        uni.showToast({
          title: '身份验证错误',
          duration: 3000,
          icon: 'none'
        });
        logout().then(rs => {
          removeAllStorageSync()
          console.log(rs.code)
        })
      }
    },
    goBack(){
      // this.$store.commit('SET_AUTH_STATUS', false)
      this.$emit('hidePadLogin')
    }
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  background: url("https://szgd-dev.tgovcloud.com/public/images/login/banner.png") no-repeat;
  background-size: 100% auto;
  .go-back-img{
    width:30rpx;
    height:30rpx;
    position:absolute;
    left:20rpx;
    top:20rpx;
  }
  .form-wrap{
    .uni-input-style{
      display:inline-block;
      width:370rpx;
    }
  }
}
.form {
  position: absolute;
  bottom: 71rpx;
  // width: 1400rpx;
  width: 90vw;
  height: 480rpx;
  border-radius: 8px;
  box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  background:#fff;
  .title {
    font-size: 17px;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    font-weight: "Medium";
    padding-top: 50rpx;
    margin-bottom: 15rpx;

    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }
}

.phone-icon {
  width: 16px;
  height: 22px;
  vertical-align: middle;
  margin-right:10rpx;
}
.card-icon {
  width: 16px;
  height: 22px;
  vertical-align: middle;
  margin-right:10rpx;
}

.submit-btn {
  background: rgba(255, 172, 30, 1);
  width: 420rpx;
  height: 80rpx;
  color: #fff;
  // margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 27.75rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.myform{
  padding-bottom: 0rpx !important;
  background: #fff !important;
  .uni-forms-item__content{
    position: relative;
  }
}
</style>
